<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table  border="1px" align="center" width="80%">
				<tr>
					<td colspan="5" align="center" ><h1>用户列表</h1></td>
				</tr>
				<tr align="center">
					<td>编号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button @click="updateUser(user.id)">修改</button>
						<button @click="deleteUser(user.id)">删除</button>
					</td>
				</tr>
			</table>
			<div style="margin-left: 75px;">
				<h2 >用户新增</h2>
				名称: <input type="text" v-model.trim="addUser.name" style="width: 80px;"/>
				年龄: <input type="text" v-model.number="addUser.age" style="width: 80px;"/>
				性别: <input type="text" v-model.trim="addUser.sex" style="width: 80px;"/>
				<button @click="insert">新增</button>
			</div>
			<div style="margin-left: 75px;">
				<h2 >用户修改</h2>
				id: <input type="text" v-model.trim="user.id" style="width: 80px;"/>
				名称: <input type="text" v-model.trim="user.name" style="width: 80px;"/>
				年龄: <input type="text" v-model.number="user.age" style="width: 80px;"/>
				性别: <input type="text" v-model.trim="user.sex" style="width: 80px;"/>
				<button @click="updateUserList">修改</button>
			</div>
		</div>
		
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		
		<script>
			//设定axios请求前缀
			axios.defaults.baseURL = "http://localhost:8090"
			const app = new Vue({
				el: "#app",
				data: {//页面中的数据必须在data中定义
					// 定义集合数据
					userList: [],
					addUser: {
						name: "",
						age: 0,
						sex: ""
					},
					user: {
						id:"",
						name: "",
						age: 0,
						sex: ""
					}
				},
				methods:{
					async getUserList(){
						let{data:result} = await axios.get("/vue/getUserList")
						console.log(result)
						//ajax调用值后,将result给属性
						this.userList = result
					},
					//新增的操作 类型post
					async insert(){
						//不需要返回值
						 await axios.post("/vue/insertUser",this.addUser)
						 //将列表页面重新刷新
						 this.getUserList()
					},
					async deleteUser(id){
						await axios.delete(`vue/deleteUser/${id}`)
						this.getUserList()
					},
					async updateUser(id){
						this.user.id=id
					},
					async updateUserList(){
						await axios.put("/vue/updateUserList",this.user)
						this.getUserList()
					}
				},
				mounted() {
					//console.log("vue实例化成功")
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
